
<!--督导结果统计-->
<template>
  <div class="wrapper-container">
  <div class="container" style="width: 100%; height: 350px">
        <div class="left">
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
        <div class="right">
            <div class="search-container">
      <div class="search-container-left" style="display: flex">
        <div
          class="plsc-button"
          style="width: 180px; margin-left: 10px"
        >
          <img src="../../../assets/assessment/删除.png" alt="" />
          <span>批量删除选中删除</span>
        </div>
        <div
          class="cjrc-button"
      
          style="width: 180px; margin-left: 10px"
        >
          <img src="../../../assets/assessment/组 738.png" alt="" />
          <span>创建人才培养方案</span>
        </div>
      
        
        <div
          class="plsc-button"
          style="width: 180px; margin-left: 10px"
        >
          <img src="../../../assets/assessment/删除.png" alt="" />
          <span>批量删除选中删除</span>
        </div>
        <div
          class="cjrc-button"
      
          style="width: 180px; margin-left: 10px"
        >
          <img src="../../../assets/assessment/组 738.png" alt="" />
          <span>创建人才培养方案</span>
        </div>
      </div>
    </div>
        <div class="plan-entry-table-container"> 
        <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
      >
        <el-table-column width="60" align="center" type="selection">
        </el-table-column>
        <el-table-column
             width="260"
          prop="cz"
          label="操作"
          align="center"
          class-name=""
          label-class-name=""
          
        >
          <template slot-scope="scope">
              <div style="display:flex">
            <div class="lucj-import-button">
              <img src="../../../assets/assessment/lrcj-import.png" alt="" />
              <span>修改</span>
            </div>
           
            <div class="lucj-import-button" >
              <img src="../../../assets/assessment/lrcj-import.png" alt="" />
              <span>删除</span>
            </div>
            <div class="lucj-import-button">
              <img src="../../../assets/assessment/lrcj-import.png" alt="" />
              <span>详情</span>
            </div>
              </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rcpyfamc"
          label="专业班次"
          align="center"
        >
        </el-table-column>
        <el-table-column  width="80" prop="bb" label="别名" align="center">
        </el-table-column>
        <el-table-column prop="zybh" label="学员队" align="center">
        </el-table-column>
        <el-table-column prop="zymc" label="专业" align="center">
        </el-table-column>
        <el-table-column prop="pycc" label="年级" align="center">
        </el-table-column>
        <el-table-column prop="edzxf" label="所在校区" align="center">
        </el-table-column>
        <el-table-column prop="edzxf" label="额定人数" align="center">
        </el-table-column>
        </el-table>
        </div>
        </div>
   </div>
   <div class="button-group">
         <div class="bottom-block" style="margin-left: 2.5%;cursor: pointer;">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
      </div>
    </div>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
    </div>
   </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      tableData: [
        {
          cz: "",
          rcpyfamc: "学院42队",
          bb: "2001",
          zybh: "12大队",
          zymc: "英语",
          pycc: "大专",
          edzxf: "30",
        },
      ],
      data: [
        {
          label: "2022",
          children: [
            {
              label: "英语【本科】",
            },
            { label: "缅甸语【1102任职】" },
          ],
        },
        {
          label: "2021",
          children: [
            {
              label: "英语【本科】",
            },
            { label: "俄语【专科】" },
            {
              label: "德语【专科】",
            },
            { label: "日语【专科】" },
          ],
        },
      ],
       
    };
  },
  computed: {
    config() {
      return {
        mergeTarget: "id", // 通用依据
        combineProp: [
          // combineProp - 根据mergeTarge 进行合并的单元格属性
          "role1",
          "role2",
          "roleSystem",
        ],
      };
    },
  },

 methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    xg() {},
    kcsz() {},
    sc() {},
    xq() {},
    downLoadExcel() {
      let el = this;
      let planid = this.tableData[this.reportIndex].planid;
      let href =
        window._CONFIG.previewurl +
        `/scorequery/downLoadExcel?planid=${planid}`;
      let alink = document.createElement("a");
      el.$message({
        showClose: true,
        message: "下载中，请稍后",
        type: "success",
      });
      alink.style.display = "none";
      alink.download = "按课程导出.word"; //下载后文件名
      alink.href = href;
      document.body.appendChild(alink);
      alink.click();
      document.body.removeChild(alink); //下载完成移除元素
    },
    lucjClick(index) {
      this.showInportReportDialog = true;
      this.reportIndex = index;
    },
  },
  created() {
    this.mergeRow();
  },
  mounted() {
    var _this = this;
    var tempArry = Array.from(new Array(12).keys());
    tempArry.forEach(function (e) {
      _this.mounthList.push({
        value: e + 1,
        label: e + 1 + "月",
      });
    });
  },
};
</script>
<style lang="less" scoped>
 .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

.plsc-button {
  height: 28px;
  background: #ffefef;
  border: 1px solid #fa5339;
  border-radius: 6px;
  color: #ff3819;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}
.cjrc-button {
  height: 28px;
  background: #efebff;
  border: 1px solid #5230e9;
  border-radius: 6px;
  color: #5230e9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}
.search-container {
    margin-top: 17px;
    padding-left: 68px;

    flex-direction: row;
    justify-content: space-between;
    .search-container-left {
      display: flex;
      flex-direction: row;
    }
    .search-container-right {
      display: flex;
      flex-direction: row;

      justify-content: flex-end;
      margin-top: 17px;
    }
    .search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;
      > span {
        margin-right: 6px;
      }
    }
    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
    .export-buttons {
      margin-right: 20px;
      width: 180px;
      height: 28px;
      line-height: 28px;
      background:#ebe6ff;
      border: 1px solid #5230e9;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #5230e9;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
    .export-button {
      margin-right: 20px;
      width: 180px;
      height: 28px;
      line-height: 28px;
      background: #f1fff8;
      border: 1px solid #02c86c;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #02c86c;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
    .add-button {
      width: 180px;
      height: 28px;
      line-height: 28px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }
.plan-entry-table-container {
    
  margin-top: 30px;
  width: 100%;
  margin: 0 auto;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #02c86c;
    }
  }

  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f3b815;
    }
  }
}
.container {
  width: 100%;
  display: flex;
  .left {
    width: 20%;
  }
  .right {
    /deep/ .el-table thead {
      color: #004ca7;
    }
  }
}
.search-container {
  justify-content: flex-start !important;
}
 .tjst-button {
      width: 78px;
      height: 27px;
      line-height: 27px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
      cursor: pointer;
    }
    .ckmtjh-button {
      .tjst-button;
      width: 114px;
      background: #f1fff8;
      border: 1px solid #02c86c;
      color: #02c86c;
    }
.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
.item-row .el-col {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-right: none !important;
}
.item-row .el-col:not(:first-child) {
  border-left: 1px solid rgba(0, 76, 167, 0.39);
}
.single-row .el-col:not(:last-child) {
  border-right: 1px solid rgba(0, 76, 167, 0.39);
}
.my-form .single-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 76, 167, 0.39);
}
.name-col {
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #004ca7;
  background: rgba(77, 129, 192, 0.1);
}
.content-col {
  padding-left: 10%;
}
.wrapper-container {
  .my-form {
    width: 100%;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 57px auto 19px;
    border-radius: 9px;
  }
  .button-group {
    padding-top: 20px;
    width: 915px;
    margin: 0 auto;
    text-align: center;
    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;
      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin: 0 40px;
      }
    }
  }
}

@import "../../../styles/special.less";
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.content-div {
  max-width: 200px;
}
.comment-div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.table-container::v-deep .el-table__header th {
  border-color: #c7d7eb !important;
  padding-left: 10px;
}
.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}
.filter-button::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
